<template>
  <div>
    <div class="xw-block" style="display: flex">
      <el-input v-model="pageRequest.q.subjectName" style="width: 300px" placeholder="请输入你想搜索的内容？"
                clearable @clear="clearSearch"></el-input>
      <el-button style="margin-left: 20px" type="primary" @click="load">搜索</el-button>
    </div>

    <div class="xw-block" style="display: flex">
      <el-button type="primary" @click="add">新增课程</el-button>
      <el-popconfirm
          style="margin-left: 5px"
          confirm-button-text="确定"
          cancel-button-text="我再想想"
          icon="el-icon-info"
          icon-color="red"
          title="您确定要删除吗？"
          @confirm="delBatch"
      >
        <el-button slot="reference">批量删除</el-button>
      </el-popconfirm>
    </div>

    <el-table
        class="xw-block-table"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="subjectName"
          label="课程名称"
      >
      </el-table-column>
      <el-table-column
          prop="subjectImg"
          label="课程图片"
      >
        <template slot-scope="scope">
          <el-image style="width: 70px;height: 70px" :src="scope.row.subjectImg"
                    :preview-src-list="[scope.row.subjectImg]" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="subjectDesc"
          label="课程描述"
      >
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleVideoPlay(scope.row)">查看视频</el-button>
          <el-button size="small" @click="edit(scope.row)">编辑</el-button>
          <el-popconfirm
              style="margin-left: 5px"
              confirm-button-text="确定"
              cancel-button-text="我再想想"
              icon="el-icon-info"
              icon-color="red"
              title="您确定要删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button slot="reference" size="small">删除</el-button>
          </el-popconfirm>


        </template>
      </el-table-column>
    </el-table>

    <div class="xw-block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="pageSizeArr"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <MyDrawer ref="MyDrawer" :title="this.selectRow.id ? '更新':'新增'" @saveOrUpdate="saveOrUpdate">
      <el-form class="line" label-position="top">
        <el-form-item label="课程分类">
          <el-select v-model="selectRow.categoryId" placeholder="请选择分类">
            <el-option
                v-for="item in subjectCategoryList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程图片">
          <el-upload
              class="avatar-uploader"
              :action="baseURL() + '/file/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <img v-if="selectRow.subjectImg" :src="selectRow.subjectImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input placeholder="请输入课程名称" v-model="selectRow.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="课程描述">
          <el-input placeholder="请输入课程描述" v-model="selectRow.subjectDesc"></el-input>
        </el-form-item>
        <!--   上传文件     -->
        <el-form-item label="课程视频">
          <el-upload
              class="avatar-uploader"
              :action="baseURL() + '/aliyun/upload'"
              :show-file-list="false"
              :on-progress="handleFileProgress"
              :on-success="handleFileSuccess">
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <el-progress v-if="showProgress" :percentage="uploadProgress" class="upload-progress"></el-progress>
          </el-upload>
        </el-form-item>
      </el-form>
    </MyDrawer>

    <MyDrawer ref="VideoPlayDrawer">
      <VideoPlay :videoId="videoId" v-if="videoFlag"></VideoPlay>
    </MyDrawer>
  </div>
</template>
<script>
import MyDrawer from "@/components/MyDrawer.vue"
import VideoPlay from "@/components/VideoPlay.vue";

export default {
  data() {
    return {
      delIds: [],
      selectRow: {},
      pageSizeArr: [10, 20, 30, 40],
      tableData: [],
      pageRequest: {
        pageNum: 1,
        pageSize: 10,
        q: {
          subjectName: ''
        }
      },
      subjectCategoryList: [],
      total: 0,
      uploadProgress: 0,
      showProgress: false,
      videoId: '',
      videoFlag: false
    }
  },
  components: {VideoPlay, MyDrawer},
  mounted() {
    this.load()
    this.getSubjectCategoryList()
  },
  methods: {
    // 视频播放
    handleVideoPlay(e) {
      console.log(e)
      this.videoId = e.videoId
      this.videoFlag = true
      this.$refs.VideoPlayDrawer.open()
    },
    // 处理文件上传进度
    handleFileProgress() {
      // 更新进度条
      this.uploadProgress = Math.floor(event.percent);
      this.showProgress = true;
    },
    getSubjectCategoryList() {
      this.request.get("/subjectCategory/all").then(res => {
        if (res.code === '200') {
          this.subjectCategoryList = res.data
        }
      })
    },
    handleAvatarSuccess(e) {
      if (e.code === '200') {
        this.selectRow.subjectImg = e.data
        this.$forceUpdate()
      }
    },
    handleFileSuccess(e) {
      if (e.code === '200') {
        this.selectRow.videoId = e.data
        this.$forceUpdate()
        this.messageSuccess("上传成功，请稍后再查看")
      }
    },
    edit(row) {
      this.selectRow = row
      this.$refs.MyDrawer.open(this.selectRow)
    },
    add() {
      this.selectRow = {}
      this.$refs.MyDrawer.open()
    },
    del(id) {
      this.request.delete("/subject/" + id).then(res => {
        if (res.code === '200') {
          this.messageSuccess("删除成功")
          this.load()
        } else {
          this.messageError("删除失败")
        }
      })
    },
    delBatch() {
      if (this.delIds && this.delIds.length > 0) {
        this.request.post("/subject/deleteBatchByIds", this.delIds).then(res => {
          if (res.code === '200') {
            this.messageSuccess("删除成功")
            this.load()
          } else {
            this.messageError("删除失败")
          }
        })
      } else {
        this.messageError("请先勾选数据")
      }
    },
    saveOrUpdate(e) {
      console.log("saveOrUpdate", e)
      this.selectRow.id
      if (this.selectRow.id ?? "") {
        this.request.post("/subject/update", this.selectRow).then(res => {
          if (res.code === '200') {
            if (!this.selectRow.id) {
              this.messageSuccess(`操作成功`)
            } else {
              this.messageSuccess("操作成功")
            }
            this.$refs.MyDrawer.close()
            this.load()
          } else {
            this.messageError(res.msg)
          }
        })
      } else {
        this.request.post("/subject/create", this.selectRow).then(res => {
          if (res.code === '200') {
            if (!this.selectRow.id) {
              this.messageSuccess(`操作成功`)
            } else {
              this.messageSuccess("操作成功")
            }
            this.$refs.MyDrawer.close()
            this.load()
          } else {
            this.messageError(res.msg)
          }
        })
      }
    },
    // 清空搜索
    clearSearch() {
      this.menuName = '';
      this.load(); // 可选：清空后重新加载数据
    },

    load() {
      this.request.post("/subject/page", this.pageRequest).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    handleSizeChange(size) {
      this.pageRequest.pageSize = size
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageRequest.pageNum = pageNum
      this.load()
    },
    handleSelectionChange(e) {
      this.delIds = e.map(x => x.id)
    }
  }
}
</script>